$(function () {
	// 需求0: 接收id,根据id获取文章所有信息,给form赋值
	// console.log(location.href.split('='))
	// console.log(location.href.split('=')[1])
	function initForm() {
		let id = location.href.split('=')[1]
		// 发送axios
		axios({
			method: 'GET',
			// : 删除 / 留下
			url: '/my/article/' + id,
		}).then((res) => {
			if (res.data.status !== 0) {
				return layer.msg(res.data.message)
			}
			console.log(res.data);
			// 成功后赋值
			form.val('formEdit', res.data.data)
			// 富文本赋值
			setTimeout(function () {
				tinyMCE.activeEditor.setContent(res.data.data.content)
			}, 500);
			// 封面 - 赋值
			let baseURL = 'http://api-breakingnews-web.itheima.net'
			let url = baseURL + res.data.data.cover_img
			$image
				.cropper('destroy')	  // 销毁旧的裁剪区域
				.attr('src', url)	  // 重新设置图片路径
				.cropper(options)	  // 重新初始化裁剪区域
		})
	}

	// 需求1: 渲染文章分类
	let layer = layui.layer
	let form = layui.form
	initArtCateList()
	function initArtCateList() {
		axios({
			method: 'GET',
			url: '/my/article/cates',
		}).then((res) => {
			if (res.data.status !== 0) {
				return layer.msg(res.data.message)
			}
			// 成功获取后,渲染
			let arr = ['<option value="">请选择文章类别</option>']
			res.data.data.forEach((ele) => {
				arr.push(`
                    <option value="${ele.Id}">${ele.name}</option>
                `)
			})
			// 赋值
			let str = arr.join('')
			$('[name=cate_id]').empty().html(str)
			// form表单同步渲染
			form.render()
			// 文章分类,select标签渲染完成,form表单同步渲染
			initForm()
		})
	}

	// 需求2: 初始化富文本编辑器
	initEditor()

	// 1. 初始化图片裁剪器
	var $image = $('#image')
	// 2. 裁剪选项
	var options = {
		aspectRatio: 400 / 280,
		preview: '.img-preview'
	}
	// 3. 初始化裁剪区域
	$image.cropper(options)

	// 需求4: 确认状态
	let state  // 设置为全局变量
	$('#btnSave1').on('click', function () {
		state = '已发布'
	})
	$('#btnSave2').on('click', function () {
		state = '草稿'
	})

	// 需求5: 选择封面
	$('#chooseImage').on('click', function () {
		$('#file').click()
	})
	$('#file').on('change', function (e) {
		var file = e.target.files[0]
		if (file == undefined) {
			return layer.msg('此文章封面为空！')
		}
		var newImgURL = URL.createObjectURL(file)
		$image
			.cropper('destroy')      // 销毁旧的裁剪区域
			.attr('src', newImgURL)  // 重新设置图片路径
			.cropper(options)        // 重新初始化裁剪区域
	})

	// 表单提交
	$('#formPub').on('submit', function (e) {
		e.preventDefault()
		// form表单,创建要给 formdata 对象
		let fd = new FormData(this)
		// 添加状态
		fd.append('state', state)
		// 添加文件
		$image
			.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
				width: 400,
				height: 280
			})
			.toBlob(function (blob) {// 将 Canvas 画布上的内容，转化为文件对象
				// 得到文件对象后，进行后续的操作
				fd.append('cover_img', blob)
				// console.log(...fd)
				// todo: 后面上传文件的ajax,也要写到这个回调函数中
				//  jQuery 中的 ajax 和 axios 两种方式实现文件上传

				// 第二种 : axios
				axios({
					method: 'POST',
					url: '/my/article/edit',
					// 没有设置默认的传递方式,没有设置默认的编码
					data: fd
				}).then((res) => {
					if (res.data.status !== 0) {
						return layer.msg(res.data.message)
					}
					// 成功给出提示
					layer.msg('恭喜您,修改文章成功！')
					// 跳转到文章列表页
					setTimeout(function () {
						window.parent.document.querySelector('#art_list').click()
					}, 1500)
				})


				// 第一种 : jQuery中的ajax --- 两个false
				// let baseURL = 'http://api-breakingnews-web.itheima.net'
				// $.ajax({
				//     method: 'POST',
				//     url: baseURL + '/my/article/add',
				//     contentType: false,
				//     processData: false,
				//     data: fd,
				//     headers: {
				//         Authorization: localStorage.getItem('token')
				//     },
				//     success: function (res) {
				//         console.log(res);
				//         layer.msg(res.message)
				//     }
				// })
			});
	})
});